<template>
  <el-container>
    <el-header>
      新闻编辑
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="newsTypeValue" placeholder="请选择新闻类型">
            <el-option
              v-for="item in newsTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-input v-model="newsTitle" placeholder="请输入新闻标题"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input v-model="author" placeholder="请输入作者"></el-input>
        </el-col>
        <el-col :span="12">
          <el-input v-model="abstract" placeholder="请输入新闻摘要"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <UE v-if="defaultMsg" :defaultMsg=defaultMsg :config=config ref="ue"></UE>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-button @click="modifyBtnConfirm()">修改新闻</el-button>
        </el-col>
      </el-row>
    </el-main>
</el-container>
</template>

<script>
import UE from 'base/ueditor/ueditor'
import axios from 'axios'
export default {
  data () {
    return {
      newsTypeOption: [{
        value: 1,
        label: '佰钧成新闻'
      }, {
        value: 2,
        label: '行业视点'
      }, {
        value: 3,
        label: '新闻速递'
      }],
      newsTypeValue: 1,
      newsTitle: '',
      defaultMsg: '',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 500
      },
      newsMain: '',
      author: '佰钧成',
      abstract: '',
      param: '',
      src: '',
      newsId: ''
    }
  },
  mounted () {
    this.newsId = this.$route.query.newsId
    axios.get('/api/getNewsById1', {
      params: {
        newsId: this.newsId
      }
    }).then((res) => {
      let data = res.data.data      
      this.author = data.author
      this.newsTitle = data.title
      this.newsTypeValue = parseInt(data.type)
      this.defaultMsg = data.main
      this.abstract = data.abstract
    })
  },
  methods: {
    // beforeupload: function (file) {
    //   let windowURL = window.URL || window.webkitURL
    //   this.src = windowURL.createObjectURL(file)
    //   this.param = new FormData()
    //   this.param.append('file', file, file.name)
    //   return false
    // },
    modifyBtnConfirm: function () {
      this.newsMain = this.$refs.ue.getUEContent()
      if (this.newsTitle === '') {
        this.$message('标题不能为空!')
        return
      } else if (this.newsMain === '') {
        this.$message('正文不能为空!')
        return
      }
      this.$confirm('是否已完成该新闻编辑, 点击确定该新闻将被提交?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(this.modifyNews
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加新闻'
        })
      })
    },
    async modifyNews () {
      let res = await axios.get('/api/modifyNews', {
        params: {
          id: this.newsId,
          title: this.newsTitle,
          type: this.newsTypeValue,
          content: this.newsMain,
          abstract: this.abstract,
          author: this.author
        }
      })
      if (res.data.code === 0) {
        this.$message({
          type: 'success',
          message: '修改新闻成功!'
        })
        this.$refs.ue.setUEContent('')
        this.newsTitle = ''
        this.abstract = ''
      } else {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        })
      }
    }
  },
  components: {
    UE
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
</style>
